<template>
 <div class="home">
  当前用户：{{name}},分数：{{score}},等级：{{rank}}
    <div class="card-item">
      <div class="date-picker-change">
        <h3>统计数据</h3>
      </div>
      <el-row :gutter="12" style="width: 100%">
        <el-col :span="6">
          <el-card shadow="always">
            <div class="item-title">总访问量</div>
            <div class="item-amount" ref="countupviews">
              {{ views }}
            </div>
            <div class="item-compare">
              <span
                >较昨日<i
                  class="el-icon-top-right"
                  style="color: red"
                  v-show="allViewsMom > 0"
                ></i
                ><i
                  class="el-icon-bottom-right"
                  style="color: green"
                  v-show="allViewsMom < 0"
                ></i
              ></span>
              <span class="num"> {{ Math.abs(allViewsMom) }} </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="item-title">题目总数</div>
            <div class="item-amount" ref="countuppages">
              {{ pages }}
            </div>
            <div class="item-compare">
              <span
                >较昨日<i
                  class="el-icon-top-right"
                  style="color: red"
                  v-show="allpagesMom > 0"
                ></i
                ><i
                  class="el-icon-bottom-right"
                  style="color: green"
                  v-show="allpagesMom < 0"
                ></i
              ></span>
              <span class="num"> {{ Math.abs(allpagesMom) }} </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="item-title">今日浏览量(PV)</div>
            <div class="item-amount" ref="countupdayViews">
              {{ dayViews }}
            </div>
            <div class="item-compare">
              <span
                >较昨日<i
                  class="el-icon-top-right"
                  style="color: red"
                  v-show="dayViewsMom > 0"
                ></i
                ><i
                  class="el-icon-bottom-right"
                  style="color: green"
                  v-show="dayViewsMom < 0"
                ></i
              ></span>
              <span class="num"> {{ parseFloat(Math.abs(dayViewsMom)) }} </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="item-title">今日访问IP数(UV)</div>
            <div class="item-amount" ref="countupdayIp">
              {{ dayIp }}
            </div>
            <div class="item-compare">
              <span
                >较昨日<i
                  class="el-icon-top-right"
                  style="color: red"
                  v-show="dayIpMom > 0"
                ></i
                ><i
                  class="el-icon-bottom-right"
                  style="color: green"
                  v-show="dayIpMom < 0"
                ></i
              ></span>
              <span class="num"> {{ parseFloat(Math.abs(dayIpMom)) }} </span>
            </div>
          </el-card>
        </el-col>
      </el-row>   
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name','score','rank'
    ])
   
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.home {
  .date-picker-change {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
  }
  .card-item {
    .item-title {
      text-align: center;
      font-size: 16px;
      padding: 5px;
    }
    .item-amount {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      padding: 5px;
    }
    .item-compare {
      text-align: center;
      font-size: 14px;
      .num {
        color: #f85149;
      }
    }
    .type-data {
      padding: 20px 0;
    }
  }
  .dayViews {
    padding: 20px;
  }
}
</style>
